<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>品优购</title>
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/all.css">
</head>

<body>
    <!--快捷导航栏-->
    <section class="shortcut">
        <div class="w">
            <div class="f1">
                <ul>
                    <li>品优购欢迎你！&nbsp;</li>
                    <li>
                        <a href="#">请登录</a>&nbsp;<a href="./register.html" class="style_red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li>我的订单</li>
                    <li></li>
                    <li class="arrow-icon">我的品优购</li>
                    <li></li>
                    <li class="arrow-icon">品优购会员</li>
                    <li></li>
                    <li class="arrow-icon">企业采购</li>
                    <li></li>
                    <li class="arrow-icon">关注品优购</li>
                    <li></li>
                    <li class="arrow-icon">客户服务</li>
                    <li></li>
                    <li class="arrow-icon">网站导航</li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 头部导航 -->
    <div class="w">
        <div class="header">
            <div class="logo">

                <h1>
                    <a href="index.html" title="品优购商城">品优购商城</a>
                </h1>
            </div>
            <!-- 搜索模块 -->
            <div class="search">
                <input type="search" name="" id="" placeholder="语言开发">
                <button>搜索</button>
            </div>
            <!-- 热点关键词模块 -->
            <div class="hotwords">
                <a href="#" class="style_red">优惠购首发</a>
                <a href="#">亿元优惠</a>
                <a href="#">9.9元团购</a>
                <a href="#">没满99减30</a>
                <a href="#">办公用品</a>
                <a href="#">电脑</a>
                <a href="#">通信</a>
            </div>
            <!-- 购物车模块 -->
            <div class="shopcar">
                我的购物车
                <i class="count">8</i>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="nav">
            <div class="w">
                <div class="dropdown">
                    <div class="dt">全部商品分类</div>
                    <div class="dd">
                        <ul>
                            <li><a href="#">家用电器</a></li>
                            <li><a href="./list.html">手机</a><span>|</span><a href="#">数码</a><span>|</span><a href="#">通信</a></li>
                            <li><a href="#">电脑</a></li>
                            <li><a href="#">家具</a></li>
                            <li><a href="#">男装</a></li>
                            <li><a href="#">化妆</a></li>
                            <li><a href="#">运动户外</a></li>
                            <li><a href="#">汽车</a></li>
                            <li><a href="#">母婴</a></li>
                            <li><a href="#">食品 </a></li>
                            <li><a href="#">医药保健</a></li>
                            <li><a href="#">图书</a></li>
                            <li><a href="#">彩票</a></li>
                            <li><a href="#">理财</a></li>
                            <li><a href="#">鞋子</a></li>
                        </ul>
                    </div>
                </div>
                <div class="navitems">
                    <ul>
                        <li><a href="#">服装城</a></li>
                        <li><a href="#">美妆馆</a></li>
                        <li><a href="#">传志超市</a></li>
                        <li><a href="#">全球购</a></li>
                        <li><a href="#">闪购</a></li>
                        <li><a href="#">拍卖</a></li>
                        <li><a href="#">团购</a></li>
                        <li><a href="#">有趣</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 中间部分 -->
    <div class="w">
        <div class="mainbox">
            <div class="foucs">
                <ul>
                    <li>
                        <img src="./img/focus1.png" alt="">
                    </li>
                </ul>
            </div>
            <div class="news">
                <div class="news1">
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <div class="news-bd">
                        <ul>
                            <li> <a href="#"><strong>[重磅]</strong>嘎覆盖范围附近的规划和回款合计阿达的后代</a></li>
                            <li> <a href="#"><strong>[特惠]</strong>收集好环境设计换手机号交换机上就单独好的</a></li>
                            <li> <a href="#"><strong>[头条]</strong>巨野无或军女军或军或军军军军女我计划规定</a></li>
                            <li> <a href="#"><strong>[最新]</strong>收费的热播的过程的口袋泥塑木雕小白菜更多</a></li>
                            <li> <a href="#"><strong>[今日]</strong>温热奋斗不吃肉灵敏度似懂非懂马上发单人</a></li>

                        </ul>
                    </div>
                </div>
                <div class="news2">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                        <li> <i></i>
                            <p>话费</p>
                        </li>
                    </ul>
                </div>
                <div class="news3">
                    <img src="./img/bargain.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 推荐模块 -->
    <div class="w">
        <div class="section">
            <div class="section-hd">
                <img src="./img/recom.png" alt="">
            </div>
            <div class="section-bd">
                <ul>
                    <li>
                        <img src="./img/1.png" alt="" width="248px" height="164">
                    </li>
                    <li>
                        <img src="./img/2.png" alt="" width="248px" height="164">
                    </li>
                    <li>
                        <img src="./img/3.png" alt="" width="248px" height="164">
                    </li>
                    <li>
                        <img src="./img/4.png" alt="" width="250px" height="164">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 电器 -->
     <div class="w"> 
        <div class="boxs">
            <div class="box-jiadian">
                <div class="box-hd">
                    <h3>家用电器</h3>
                    <div class="tab-list">
                        <ul>
                            <li><a href="#" class="style_red">热门</a>|</li>
                            <li><a href="#">大家电</a>|</li>
                            <li><a href="#">生活电器</a>|</li>
                            <li><a href="#">厨房电器</a>|</li>
                            <li><a href="#">个护健康</a>|</li>
                            <li><a href="#">应季电器</a>|</li>
                            <li><a href="#">新奇特</a>|</li>
                            <li><a href="#">高端电器</a>|</li>
                            <li><a href="#">空气/净水</a></li>
                        </ul>
                    </div>
                </div>
                <div class="box-bd">
                    <div class="tab-content">
                        <div class="tab-list-item">
                            <div class="col-210">
                                <ul>
                                    <li><a href="#">节能补贴</a></li>
                                    <li><a href="#">4k电视</a></li>
                                    <li><a href="#">空气净化器</a></li>
                                    <li><a href="#">电饭煲</a></li>
                                    <li><a href="#">滚筒洗衣机</a></li>
                                    <li><a href="#">电热水器</a></li>
                                </ul>
                                <img src="./img/jd1.jpg" alt="">
                            </div>
                            <div class="col-329">
                                <a href="#">
                                    <img src="./load/floor-1-b01.png" alt="">
                                </a>
                            </div>
                            <div class="col-221">
                                <a href="#" class="bb"><img src="./load/jd3.jpg" alt=""> </a>
                                <a href="#" ><img src="./load/jd4.jpg" alt=""></a>
                            </div>
                            <div class="col-221">
                                <a href="#">
                                    <img src="./load/jd5.jpg" alt="">
                                </a>
                            </div>
                            <div class="col-219">
                                <a href="#" class="bb"> <img src="./load/jd6.jpg" alt=""> </a>
                                <a href="#"><img src="./load/jd7.jpg" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <!-- 手机通讯 -->
    <div class="w"> 
        <div class="boxs">
            <div class="box-jiadian">
                <div class="box-hd">
                    <h3>手机通讯</h3>
                    <div class="tab-list">
                        <ul>
                            <li><a href="#" class="style_red">热门</a>|</li>
                            <li><a href="#">大家电</a>|</li>
                            <li><a href="#">生活电器</a>|</li>
                            <li><a href="#">厨房电器</a>|</li>
                            <li><a href="#">个护健康</a>|</li>
                            <li><a href="#">应季电器</a>|</li>
                            <li><a href="#">新奇特</a>|</li>
                            <li><a href="#">高端电器</a>|</li>
                            <li><a href="#">空气/净水</a></li>
                        </ul>
                    </div>
                </div>
                <div class="box-bd">
                    <div class="tab-content">
                        <div class="tab-list-item">
                            <div class="col-210">
                                <ul>
                                    <li><a href="#">节能补贴</a></li>
                                    <li><a href="#">4k电视</a></li>
                                    <li><a href="#">空气净化器</a></li>
                                    <li><a href="#">电饭煲</a></li>
                                    <li><a href="#">滚筒洗衣机</a></li>
                                    <li><a href="#">电热水器</a></li>
                                </ul>
                                <img src="./img/jd1.jpg" alt="">
                            </div>
                            <div class="col-329">
                                <a href="#">
                                    <img src="./load/floor-1-b01.png" alt="">
                                </a>
                            </div>
                            <div class="col-221">
                                <a href="#" class="bb"><img src="./load/jd3.jpg" alt=""> </a>
                                <a href="#" ><img src="./load/jd4.jpg" alt=""></a>
                            </div>
                            <div class="col-221">
                                <a href="#">
                                    <img src="./load/jd5.jpg" alt="">
                                </a>
                            </div>
                            <div class="col-219">
                                <a href="#" class="bb"> <img src="./load/jd6.jpg" alt=""> </a>
                                <a href="#"><img src="./load/jd7.jpg" alt=""></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
    <!-- 底部模块 -->
    <div class="w">
        <div class="footer">
            <div class="f">
                <div class="mod">
                    <ul>
                        <li>
                            <h5 class="service-1"></h5>
                            <div class="service">
                                <h4>正品保障</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li>
                            <h5 class="service-2"></h5>
                            <div class="service">
                                <h4>极速物流</h4>
                                <p>急速物流，极速送达</p>
                            </div>
                        </li>
                        <li>
                            <h5 class="service-3"></h5>
                            <div class="service">
                                <h4>无忧售后</h4>
                                <p>正品保障，提供发票</p>
                            </div>
                        </li>
                        <li>
                            <h5 class="service-4"></h5>
                            <div class="service">
                                <h4>特色服务</h4>
                                <p>私人订制家电套餐</p>
                            </div>
                        </li>
                        <li>
                            <h5 class="service-5"></h5>
                            <div class="service">
                                <h4>帮助中心</h4>
                                <p>您的购物指南</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="mod-help">
                    <dl>
                        <dt>服务指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">会员介绍</a></dd>
                        <dd><a href="#">生活旅行/团购</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">大家电</a></dd>
                        <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                        <dt>极速物流</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">会员介绍</a></dd>
                        <dd><a href="#">生活旅行/团购</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">大家电</a></dd>
                        <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                        <dt>极速物流</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">会员介绍</a></dd>
                        <dd><a href="#">生活旅行/团购</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">大家电</a></dd>
                        <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                        <dt>极速物流</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">会员介绍</a></dd>
                        <dd><a href="#">生活旅行/团购</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">大家电</a></dd>
                        <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                        <dt>极速物流</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">会员介绍</a></dd>
                        <dd><a href="#">生活旅行/团购</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">大家电</a></dd>
                        <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd>
                            <img src="img/wx_cz.jpg" alt="">品优购客户端
                        </dd>
                    </dl>
                </div>
                <!-- 最底部 -->
                <div class="mod-bottom">
                    <div class="links">
                        <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a
                            href="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a
                            href="#">品优购社区</a> | <a href="#">品优购公益</a> | <a href="#">English</a> | <a href="#">Site</a>
                        | <a href="#">Contact U</a>
                    </div>
                    <div class="bottoms">
                        地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>
                        京ICP备08001421号京公网安备110108007702
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>